<template>
  <div>
    <!-- <div>这里是 【账户 信息 上传】[account-info-up]</div> -->
    <div class="info_up_header">
        <div class="span"><span>上传信息</span></div>
    </div>
    <!-- 
    步骤：
        1、选定信息种类
        2、填写相关信息
        3、预览信息
        4、发布、等待审核
    -->
    <div class='body_info_up'>
    <div class="steps_box">
        <el-steps :active="steps.step_num" simple finish-status="success">
            <el-step title="种类选择"></el-step>
            <el-step title="信息填写"></el-step>
            <el-step title="信息预览"></el-step>
            <el-step title="发布审核"></el-step>
        </el-steps>
    </div>

    <div class="do_box">
        <div class="step_01" v-if="this.steps.step_num == 0">
            <!-- <el-select v-model="info.catId" placeholder="请选择">
                <el-option
                v-for="item in info_cat"
                :key="item.catId"
                :label="item.catName"
                :value="item.catId">
                </el-option>
            </el-select> -->
            <el-cascader
                v-model="info.catIdArray"
                :options="info_cat"
                :props="cascader_props"
                filterable
                clearable
                placeholder='请选择信息种类（可筛选）'
                >
            </el-cascader>
            
        </div>
        <div class="step_02" v-if="this.steps.step_num == 1">
            <!-- 
            这里 根据用户选择的不同信息种类，会有不同的组件供用户填写，
            如input、select、textarea、时间等
            我们不知道到底是什么组件、以及各种组件出现的顺序是什么
            所以需要 【动态组件】
            
             -->
            <div class="info_title">
                <div class="info_title_left"><div class="span"><span>标题</span></div></div>
                <div class="info_title_right">
                    <div><el-input v-model="info.infoTitle" placeholder="请输入标题"></el-input></div>
                </div>
            </div>
            <!-- <component v-for="item in info_attr" :key='item.attrId' 
                :is="'com-'+item.type"
                :item_data="item"
            ></component> -->
            <com-info-attr-template :info_attr="info_attr"></com-info-attr-template>
        </div>

        <div class="step_03" v-if="this.steps.step_num == 2">
            <div class="info_title_show">
                <div class='span'><span>{{info.infoTitle}}</span></div>
            </div>
            <!-- 展示 用户 提交的信息数据 -->
            <com-show :info_attr='info_attr'></com-show>
        </div>
        <div class='step_04' v-if="this.steps.step_num == 3">
            <div class='span'><span>发布成功  等待管理员审核</span></div>
        </div>
    </div>

    <div class="btn_box">
        <div class="center">
            <el-button v-if="steps.step_num > 0  && steps.step_num <= steps.step_limit" @click="last_step">上一步</el-button>
            <el-button v-if="steps.step_num < steps.step_limit" @click="next_step">下一步</el-button>
            <el-button v-if="steps.step_num == steps.step_limit" @click="complete"> 完成 </el-button>
            <el-button @click="printUserInput">获取</el-button>
        </div>
    </div>
    </div>
  </div>
</template>

<script>
// import comInput from '../common/com-input'
// import comTextarea from '../common/com-textarea'
// import comSelector from '../common/com-selector'
// import comDatetime from '../common/com-datetime'
// import comUpload from '../common/com-upload'
import comShow from '../common/com-show'
import comInfoAttrTemplate from '../common/com-info-attr-template'
// import Index from '../../../components/icon-svg/index.vue'

export default {
  components: {
    // comInput,
    // comTextarea,
    // comSelector,
    // comDatetime,
    // comUpload,
    comShow,
    comInfoAttrTemplate,
  },
  mounted() {
    
  },
  watch:{
    //   steps:{
    //       handler:function(newValue){
    //           console.log("watch: stpes",newValue )
    //           if(newValue.step_num == 0){
                  
    //           }else if(newValue.step_num == 1){
    //               // 第二步：获取 信息 对应的属性
    //               this.getInfoAttr();
    //           }else if(newValue.step_num == 2){
                  
    //           }else if(newValue.step_num == 3){
    //               // 第四步：提交 用户输入
    //               this.postInfoAttrValue();
    //           }
    //       },
    //       deep:true,
    //   }
  },
  mounted(){
      this.getInfoCat(); // 初始，获取信息种类
  },
  data() {
    return {
        
        cascader_props:{
            value:'catId',
            label:'catName',
            expandTrigger: 'hover',
            // expandTrigger: 'click',
        },
        steps:{
            step_num: 0,
            // last_step_num : 0,
            step_limit: 3, // 共 n+1 步
        },
        info: { // 交给后端的数据【部分】
            catIdArray: [],
            catId: 0,
            infoTitle: '',
            infoStatus: 1,
            anon: 0,
        },
        info_cat:[
            {
                catId: 1,
                catName: '丢失物品',
            },
            {
                catId: 2,
                catName: '捡到物品',
            },
            {
                catId: 3,
                catName: '拼车',
            },
        ],
        info_attr:[ // 后端传递来的数据
            {attrId: 1, attrName:'物品名称', type:'input', valueSelect:'', attrValue:''},
            {attrId: 2, attrName:'可选值', type:'selector', valueSelect:'1,2,3', attrValue:''},
            {attrId: 3, attrName:'时间', type:'datetime', valueSelect:'', attrValue:''},
            {attrId: 4, attrName:'备注', type:'textarea', valueSelect:'', attrValue:''},
            {attrId: 5, attrName:'图片', type:'upload', valueSelect:'', 
            attrValue:'',
            // attrValue:'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg;https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg'
            },
            {attrId: 6, attrName:'物称', type:'input', valueSelect:'', attrValue:''},
        ],
        info_attr_value:[ // 交给后端的数据【部分】(没用到)
        // 组成：infoId、attrId、attrName、attrValue
        ],
    }
  },
  methods: {
    // 点击上一步
    last_step(){
        if(this.steps.step_num === 1){ // 返回去选择种类

        }else if(this.steps.step_num === 2){ // 修改输入的信息

        }else if(this.steps.step_num === 3){ // 提交后，返回？？？

        }
        this.steps.step_num--;
    },
    // 点击下一步
    next_step(){
        if(this.steps.step_num == 0){ // 用户选择完 信息种类 后
            this.info.catId = this.info.catIdArray[this.info.catIdArray.length-1];
            console.log("选中的 信息种类：", this.info.catId)
            if(this.info.catId == null){
                this.$message({
                    message: '请选择信息种类',
                    type: 'warning'
                });
                return
            }
            this.resetInfoAttr()
            this.getInfoAttr(); // 获取 信息 对应的属性
        }else if(this.steps.step_num === 1){ // 用户输入后
            this.printUserInput() // 打印用户输入
        }else if(this.steps.step_num === 2) { // 用户确认输入后
            this.postInfoAttrValue(); // 提交 用户输入
        }
        this.steps.step_num++;
    },
    // 回到第一步
    complete(){
        this.steps.step_num = 0;
        console.log("提交到后端：",this.info.catId, this.info_attr)
    },
    // 本地测试：控制台打印用户输入
    printUserInput(){
        var arr = this.info_attr.map(item =>{
            return item.attrValue
        })
        console.log("用户输入的数据：",this.info.catIdArray, this.info.catId, arr);
    },


    // step_01：获取种类信息
    getInfoCat(){
        this.$http1({
            url: this.$http.adornUrl("/user/info/category/list/tree"),
            method: "get",
            // params: this.$http.adornParams({})
        }).then(({ data }) => {
            this.$message({
                type: "success",
                message: "成功获取到种类信息!",
            });
            this.info_cat = data.data;
        
        });
    },
    // step_02：获取信息属性
    getInfoAttr(){
        this.$http1({
          url: this.$http.adornUrl(`/user/info/attr/${this.info.catId}`),
          method: "post",
        //   data: this.$http.adornData(data, false)
        }).then(({ data }) => {
          this.$message({
            type: "success",
            message: "成功获取信息属性!",
          });
          this.info_attr = data.info_attr;
            console.log("信息属性", this.info_attr);
        });
    },
    // 提交信息属性值
    postInfoAttrValue(){
        console.log("待提交", this.info_attr);
        var data ={
            catId: this.info.catId,
            infoTitle: this.info.infoTitle,
            infoStatus: this.info.infoStatus,
            anon: this.info.anno,
            infoAttrVos: this.info_attr,
        }
        this.$http1({
          url: this.$http.adornUrl("/user/info/user/save"),
          method: "post",
          data: this.$http.adornData(data, false)
        }).then(({ data }) => {
          this.$message({
            type: "success",
            message: "成功提交信息!",
          });
          this.resetInput();
        });
    },
    resetInput(){
        this.info = { // 交给后端的数据【部分】
            catIdArray: [],
            catId: 0,
            infoTitle: '',
            infoStatus: 1,
            anon: 0,
        },
        this.resetInfoAttr();
    },
    resetInfoAttr(){
        this.info.infoTitle = ''
        this.info_attr = [];
    }
  },
}
</script>


<style>
.info_up_header .span{
    font-size: 18px;
    margin: 10px 0;
}

.body_info_up{
    position: relative;
}
.steps_box{

}

.do_box{
    margin-bottom: 50px;
    /* height: 500px; */
    /* text-align:center; */
}
.step_01{
    padding-top: 100px;
    text-align: center;
}
.step_01 .el-cascader{
    width:400px;
    /* margin: 0 auto; */
}
/* === step02 === */
.step_02{
    width: 600px;
    margin: 0 auto;
}
.info_title{
    display: flex;
    height: 60px;
}
.info_title_left .span{
    font-size: 18px;
    text-align: center;
    margin-top: 20px;
    width: 100px;
}
.info_title_right .el-input{
    margin-top: 10px;
    width: 500px;
}
/* === step_03 === */
.step_03{
    width: 600px;
    margin: 0 auto;
}
.info_title_show{
    height: 60px;
}
.info_title_show .span{
    font-size: 24px;
    padding-top: 20px;
    margin-left: 80px;
}
/* === step_04 === */
.step_04{
    width: 700px;
    margin: 0 auto;
}
.step_04 .span{
    font-size: 20px;
    text-align: center;
    margin-top: 60px;
}

/* ===  === */
.btn_box{
    text-align: center;
}
.center{
    display: inline-block;
    margin: 0 auto;
}

/* === 级联选择器  隐藏滚动条 === */
.el-cascader__dropdown .el-scrollbar{
    /* overflow: hidden; */
}
.el-cascader__dropdown .el-scrollbar__wrap{
    overflow-x: hidden;
    overflow-y: hidden;
    width: 100%;
    height: 100%;
}
</style>